<template>
  <el-dialog v-if="load" :close-on-click-modal="false" :title="form.brand_id ? '商标资料' : '添加商标资料'" v-model="visible" align-center width="1200px" @close="handleClose">
    <el-form ref="formRef" :model="form" label-position="top">
      <div class="grid grid-cols-4 gap-x-3">
        <el-form-item label="商标名称" class="col-span-2" prop="brand_name" :rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
          <el-input v-model.lazy="form.brand_name" placeholder="请输入" :maxlength="250" show-word-limit />
        </el-form-item>
        <el-form-item label="序列号" class="col-span-2">
          <el-input v-model.lazy="form.sequence_number" placeholder="请输入" :maxlength="250" show-word-limit />
        </el-form-item>
        <el-form-item label="注册号" class="col-span-2">
          <el-input v-model.lazy="form.registration_number" placeholder="请输入" :maxlength="250" show-word-limit />
        </el-form-item>
        <el-form-item label="地区" class="col-span-2" prop="region" :rules="[{ required: true, message: '不能为空', trigger: 'change' }]">
          <VSelect v-model="form.region" placeholder="请选择" :options="options.region" class="w-full" />
        </el-form-item>
        <el-form-item label="商标类型" prop="brand_type" :rules="[{ required: true, message: '不能为空', trigger: 'change' }]">
          <VSelect v-model="form.brand_type" :options="options.brand_type" class="w-full" placeholder="请选择" />
        </el-form-item>
        <el-form-item label="类别" prop="category">
          <el-input v-model.lazy="form.category" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="使用商品（商标小类）" prop="goods_used" :rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
          <el-input v-model.lazy="form.goods_used" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="" class="col-span-4" prop="brand_image">
          <VUploadFile v-model="form.brand_image" title="商标图片" :types="['jpg', 'jpeg', 'png', 'pdf']">
            图片类型只能是jpg/png/jpeg/pdf，不超过5M
          </VUploadFile>
        </el-form-item>
        <el-form-item label="" class="col-span-4">
          <VUploadFile v-model="form.certificate" title="证书" edit :types="['jpg', 'jpeg', 'png', 'pdf']">
            图片类型只能是jpg/png/jpeg/pdf，不超过5M
          </VUploadFile>
        </el-form-item>
        <el-form-item label="使用店铺" class="col-span-4">
          <UseShop ref="shopRef" v-model="form.bind_shops" :options="shopOptions" />
        </el-form-item>
        <el-form-item label="代理/办理机构" class="col-span-2" prop="agency" :rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
          <el-input v-model.lazy="form.agency" placeholder="请输入" :maxlength="250" show-word-limit />
        </el-form-item>
        <el-form-item label="&nbsp;" class="col-span-2" prop="switch_agency">
          <el-checkbox v-model="form.switch_agency" :true-label="1" :false-label="0" class="col-span-3">是否转代商</el-checkbox>
        </el-form-item>
        <el-form-item label="合同日期" prop="contract_date" :rules="[{ required: true, message: '不能为空', trigger: 'change' }]">
          <el-date-picker v-model="form.contract_date" placeholder="日期选择" type="date" value-format="YYYY-MM-DD" class="w-full" />
        </el-form-item>
        <el-form-item label="费用" prop="fee" :rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
          <div class="flex gap-2 w-full">
            <el-input-number v-model="form.fee" controls-position="right" :min="0" :step="0.01" :precision="2" placeholder="请输入" class="flex-1" />
            <span class="whitespace-nowrap">RMB</span>
          </div>
        </el-form-item>
        <el-form-item label="转代商日期" class="col-span-2" prop="switch_agency_date">
          <el-date-picker v-model="form.switch_agency_date" type="date" value-format="YYYY-MM-DD" class="w-full" placeholder="转代商日期" />
        </el-form-item>
        <el-form-item label="历史代理/办理机构" class="col-span-2" prop="history_agency">
          <el-input v-model.lazy="form.history_agency" placeholder="请输入" :maxlength="250" show-word-limit />
        </el-form-item>
        <el-form-item label="下R标日期">
          <el-date-picker v-model="form.r_mark_date" placeholder="日期选择" type="date" value-format="YYYY-MM-DD" class="w-full" />
        </el-form-item>
        <el-form-item label="下TM标日期">
          <el-date-picker v-model="form.tm_mark_date" placeholder="日期选择" type="date" value-format="YYYY-MM-DD" class="w-full" />
        </el-form-item>
        <el-form-item label="商标有效期" prop="deadline_date">
          <el-date-picker v-model="form.deadline_date" placeholder="日期选择" type="date" value-format="YYYY-MM-DD" class="w-full" />
        </el-form-item>
        <el-form-item label="持有主体" prop="use_person_id">
          <VGroup class="inline-block">
            <VSelect v-model="form.holder_type" placeholder="持有主体" :options="options.holder_type" style="width: 80px" :clearable="false" select @change="form.holder = null" />
            <VSelect v-if="form.holder_type === 1" v-model="form.holder" :options="options.company_id" placeholder="请选择" select style="min-width: 200px" />
            <VCascader v-else-if="form.holder_type === 2" v-model="form.holder" placeholder="请选择" style="min-width: 200px" />
            <el-input v-else v-model="form.holder" placeholder="请输入" class="inline" style="min-width: 200px" />
          </VGroup>
        </el-form-item>
        <el-form-item label="使用部门" prop="deadline_date">
          <VCascader v-model="form.use_department" placeholder="请选择" type="1" :areaLevel="1" class="w-full" />
        </el-form-item>
        <el-form-item label="历史持有主体" prop="applicant_id">
          <VGroup class="inline-block">
            <VSelect v-model="form.history_holder_type" placeholder="历史持有主体" :options="options.holder_type" style="width: 80px" :clearable="false" select
              @change="form.history_holder = null" />
            <VSelect v-if="form.history_holder_type === 1" v-model="form.history_holder" :options="options.company_id" placeholder="请选择" select style="min-width: 200px" />
            <VCascader v-else-if="form.history_holder_type === 2" v-model="form.history_holder" placeholder="请选择" style="min-width: 200px" />
            <el-input v-else v-model="form.history_holder" placeholder="请输入" class="inline" style="min-width: 200px" />
          </VGroup>
        </el-form-item>
        <el-form-item label="转让日期" prop="transfer_date">
          <el-date-picker v-model="form.transfer_date" placeholder="日期选择" type="date" value-format="YYYY-MM-DD" class="w-full" />
        </el-form-item>
        <el-form-item label="提交申请日期" prop="deadline_date">
          <el-date-picker v-model="form.submit_apply_date" placeholder="日期选择" type="date" value-format="YYYY-MM-DD" class="w-full" />
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="form.status">
            <el-radio v-for="(d, i) in options.status" :key="i" :label="d.value">{{ d.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" class="col-span-full">
          <el-input v-model="form.remark" type="textarea" :autosize="{ minRows: 2, maxRows: 5 }" placeholder="请输入" :maxlength="800" show-word-limit />
        </el-form-item>
      </div>
    </el-form>
    <template #footer>
      <el-button @click="close">关 闭</el-button>
      <el-button type="primary" :loading="loadings.create" @click="create(formRef)">保 存</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import api from '../api'
import { ElMessage } from 'element-plus'
import UseShop from '@/views/phone/components/UseShop'

const props = defineProps({
  options: { type: Object, default: () => ({}) },
})
const emit = defineEmits(['close', 'success'])

const load = ref(false)
const visible = ref(false)
const success = ref(false)
let loadings = reactive({})

const shopRef = ref()
const shopOptions = computed(() => (form.value.platform_shop || props.options.platform_shop || []).map(d => ({ value: d.platform_id, label: d.platform_name, children: d.shops.map(s => ({ ...s, label: s.shop_name, value: s.shop_id })) })))

// 表单处理
const formRef = ref()
const form = ref({})

// 打开弹窗
const open = async (id) => {
  if (!load.value) {
    load.value = true
    await 1
  }
  shopRef?.value?.init()
  // 编辑
  form.value = {
    "brand_name": "",
    "sequence_number": "",
    "registration_number": "",
    "region": '',
    "brand_type": '',
    "category": "",
    "goods_used": "",
    "agency": "",
    "fee": null,
    holder_type: 1,
    history_holder_type: 1,
    "brand_image": [],
    "certificate": [],
    "bind_shops": [],
    "r_mark_date": "",
    "tm_mark_date": "",
    "contract_date": "",
    "deadline_date": "",
    "use_person_id": null,
    "applicant_id": null,
    "status": 1,
    "remark": "",
    "create_user": ""
  }
  visible.value = true
  loadings = reactive({})
  success.value = false
  formRef?.value?.resetFields()
  if (id) {
    const res = await api.detail({ brand_id: id })
    const { history_holder_type, holder_type } = res.data
    if (history_holder_type < 3) {
      res.data.history_holder = +res.data.history_holder
    }
    if (holder_type < 3) {
      res.data.holder = +res.data.holder
    }
    form.value = res.data
  }

}
// 关闭弹窗
const close = () => {
  visible.value = false
}

const handleClose = () => {
  emit('close')
  success.value && emit('success')
}
// 提交
const create = async (formRef) => {
  const validator = await formRef.validate()
  if (!validator) return
  form.value.fee = Number(form.value.fee).toFixed(2)
  loadings.create = true
  api[form.value.brand_id ? 'edit' : 'create'](form.value).then(res => {
    ElMessage.success('保存成功')
    success.value = true
    close()
  }).finally(() => {
    loadings.create = false
  })
}

defineExpose({ open })
</script>